<template>
    <!-- <image class="navBg" src="@/static/bg.png" alt="" v-if="isBg"></image> -->
    <!-- <view :style="{ height: navBarStyle.height, paddingTop: navBarStyle.paddingTop }" v-if="isHeight"></view> -->
          <!-- <u-icon name="arrow-left" :color="iconColor" size="36rpx" bold @click="goBack" ></u-icon> -->
  <!-- <view class="customNav" :class="titlePosition" :style="{background: navBackground}">
    <view class="nav" :style="{ height: navBarStyle.height, paddingTop: navBarStyle.paddingTop }">
      <view class="nav_content">
        <view class="left" v-if="isBack">
          <slot name="left"></slot>
        </view>
        <view class="title" :style="{color: titleColor, fontSize: fontSize}">{{ title }}</view>
      </view>
    </view>
  </view> -->
  <u-navbar
    @rightClick="rightClick"
    autoBack
    :bgColor="navBackground"
    :title="title"
    :titleStyle="{
      'color': titleColor,
      'fontSize': fontSize,
      'font-weight': 'bold'
    }"
    placeholder
  >

    <view
        v-show="!leftTitle"
        class="u-nav-slot"
        slot="left"
    >
        <u-icon
            name="arrow-left"
            size="20"
            :color="leftIconColor"
            bold
        ></u-icon>
    </view>
  </u-navbar>
</template>
<script>
export default {
  props: {
    navBackground: {
      type: String,
      default: "transparent"
    },
    titlePosition: {
      type: String,
      default: "center"
    },
    isHeight: {
      type: Boolean,
      default: true
    },
    isBg: {
      type: Boolean,
      default: true
    },
    iconColor: {
      type: String,
      default: "#00000"
    },
    titleColor: {
      type: String,
      default: "#00000"
    },
    leftIconColor: {
      type: String,
      default: "#00000"
    },
    fontSize: {
      type: String,
      default: "32rpx"
    },
    leftTitle: Boolean,
    isBack: Boolean,
    title: String
  },
  data () {
    return {
      navBarStyle: {
        height: "44px",
        paddingTop: "78rpx"
      }
    }
  },
  methods: {
    goBack () {
      uni.navigateBack({
        delta: 1
      })
    }
  },
  created () {
    console.log(uni,'uni');
    // #ifdef MP-WEIXIN
    const { top, bottom, width, height, left, right } =
      uni.getMenuButtonBoundingClientRect();
    console.log('rect', {
      top,
      bottom,
      width,
      height,
      left,
      right,
    });
// #endif
    // const navigationBarHeight = `calc(${bottom}px + 32rpx)`;
    const navigationBarHeight = `${height}rpx`;
    // 功能按钮距离顶部高度
    const navigationBarHeightPaddingTop = `${top}px`;
    // 功能区域高度，按钮区域和title
    const systemButtonHeight = `${bottom - top}px`;
    uni.getSystemInfo({
      success: (res) => {
        // 设置导航栏样式
        this.navBarStyle = {
          height: navigationBarHeight,
          paddingTop: navigationBarHeightPaddingTop,
          borderRadius: `calc(${systemButtonHeight} / 2)`,
        };
        console.log("🚀 ~ created ~ this.navBarStyle:", this.navBarStyle)
      }
    });
  }
}
</script>
<style lang="scss" scoped>
.customNav {
  width: 100%;
  display: flex;
  padding: 0 36rpx;
  text-align: center;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 9999;
  .navBg {
    width: 100%;
    height: 328rpx;
    position: absolute;
    left: 0;
    top: 0;
  }

  .nav {
    // display: flex;
    // position: fixed;
    // top: 0;
    // left: 0;
    width: 100%;
    // z-index: 1;
    .nav_content {
      flex: 1;
      // 7为左右间距，87是胶囊宽度
      padding: 6rpx calc(7px + 87px) 6rpx 7px;
      display: flex;
      align-items: center;
      position: relative;
    }

    .left {
      position: absolute;
      left: 24rpx;
      display: flex;
      align-items: center;

      image {
        width: 80rpx;
        height: 80rpx;
      }
    }

    .title {
      font-weight: 800;
      font-size: 36rpx;
      color: #222222;
    }
  }

  .center {
    justify-content: center;
  }
  .left {
    justify-content: start;
  }

}
</style>